<template>
  <el-dialog
    v-model="dialogVisible"
    :title="{ code: '测试取码', number: '测试取号', free: '测试释放' }[type]"
    width="500"
    :before-close="handleClose"
  >
    <el-form
      ref="testForm"
      :model="formData"
      :rules="rules"
      label-width="auto"
      style="max-width: 600px"
    >
      <el-form-item v-if="['code', 'free'].includes(type)" label="号码" prop="number">
        <el-input v-model="formData.number" placeholder="请输入" clearable />
      </el-form-item>
      <el-form-item label="App" prop="app">
        <el-select v-model="formData.app" placeholder="请选择" clearable>
          <el-option v-if="hasPermission.includes('res.WA')" label="WA" value="WA" />
          <el-option v-if="hasPermission.includes('res.TG')" label="TG" value="TG" />
          <el-option v-if="hasPermission.includes('res.VIBER')" label="VIBER" value="VIBER" />
        </el-select>
      </el-form-item>
      <el-form-item v-if="false" label="bundle" prop="bundle">
        <el-select v-model="formData.bundle" placeholder="请选择" clearable>
          <el-option label="net.whatsapp.WhatsApp" value="net.whatsapp.WhatsApp" />
          <el-option label="net.whatsapp.WhatsAppSMB" value="net.whatsapp.WhatsAppSMB" />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button v-loading="loading" type="primary" @click="submit">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import { useUserStore } from "@/store";

import { smsTest, getSmsResult } from "@/api/platformConfig/index.api";
import useToggle from "@/hooks/useToggle";
const [loading, , setLoading] = useToggle();
const [dialogVisible, , setDialogVisible] = useToggle();
const { userInfo } = useUserStore();
const hasPermission = ref(
  userInfo?.permission?.children?.map((item) => (item.checked ? item.name : ""))
);

const rules = ref({
  app: [{ required: true, message: "Please input app", trigger: "change" }],
  bundle: [{ required: true, message: "Please input bundle", trigger: "change" }],
  number: [{ required: true, message: "Please input number", trigger: "blur" }],
});

const formData = ref({
  id: void undefined,
  device: "web",
  bundle: "net.whatsapp.WhatsApp",
  number: void undefined,
  app: void undefined,
  username: userInfo.username,
});

const emit = defineEmits(["callback"]);
const type = ref("");
const handleOpen = (e) => {
  console.log(e);
  e.app && (formData.value.app = e.app);
  e.type && (type.value = e.type);
  e.id && (formData.value.id = e.id);
  setDialogVisible(true);
  setLoading(false);
};

const handleClose = () => {
  setDialogVisible(false);
};

const testForm = ref(null);
const submit = async () => {
  if (!type.value) return console.log("type 未传入");

  await testForm.value.validate((valid, fields) => {
    if (valid) {
      if (type.value === "free") {
        getSmsResult({
          number: formData.value.number,
          operate: "free",
          username: "admin",
          result: "fail",
          bundle: formData.value.bundle,
          app: formData.value.app,
          device: "web",
        })
          .then((res) => {
            handleClose();
            emit("callback", { type: type.value, res });
          })
          .finally(() => {
            setLoading(false);
          });

        return;
      }

      const params = {};
      setLoading(true);
      params.username = formData.value.username;
      params.bundle = formData.value.bundle;
      params.device = formData.value.device;
      params.app = formData.value.app;

      if (type.value === "number") {
        params.id = formData.value.id;
      }

      if (type.value === "code") {
        params.number = formData.value.number;
      }

      console.log(params, "params");

      smsTest(type.value, params)
        .then((res) => {
          emit("callback", { type: type.value, res });
          handleClose();
        })
        .finally(() => {
          setLoading(false);
        });
    } else {
      console.log("error submit!", fields);
    }
  });
};

defineExpose({
  handleOpen,
});
</script>
